<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/plug/layui/css/layui.css" rel="stylesheet">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 16px;
        }
    </style>
</head>
<body>

<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">关键字</label>
        <div class="layui-input-inline">
            <input type="text" name="keyword" id="keyword" placeholder="请输入关键字" class="layui-input">
        </div>
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-primary" id="search">
                <i class="layui-icon layui-icon-search"></i> 搜索数据
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="add">
                <i class="layui-icon layui-icon-addition"></i> 添加账号
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="delete">
                <i class="layui-icon layui-icon-delete"></i> 删除选中账号
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="clear">
                <i class="layui-icon layui-icon-delete"></i> 删除所有账号
            </button>
        </div>
    </div>
</form>

<table id="demo" lay-filter="demo"></table>

<script src="/plug/layui/layui.js"></script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </div>
</script>

<script>
    layui.use('table', function () {
        layui.jquery("#search").click(function () {
            initTable();
        });
        layui.jquery("#add").click(function () {
            window.open("/pc/index/add/");
        });
        layui.jquery("#delete").click(function () {
            var checkStatus = layui.table.checkStatus('demo');
            if (checkStatus.data.length === 0) {
                alert("尚未选中数据~");
                return;
            }
            let id = "";
            layui.jquery.each(checkStatus.data, function (position, item) {
                id += item.account_id + ",";
            })
            //调用jquery框架的ajax组件
            layui.jquery.ajax({
                //接口地址
                url: "/api/account/del?id=" + id,
                //提交方式
                type: "GET",
                //成功回调
                success: function (data) {
                    alert("批量删除成功");
                    location.reload();
                },
                //失败回调
                error: function (data) {
                    alert("接口异常，请稍后再试~");
                }
            });
        });
        layui.jquery("#clear").click(function () {
            //调用jquery框架的ajax组件
            layui.jquery.ajax({
                //接口地址
                url: "/api/account/del/",
                //提交方式
                type: "GET",
                //成功回调
                success: function (data) {
                    alert("全部删除成功");
                    location.reload();
                },
                //失败回调
                error: function (data) {
                    alert("接口异常，请稍后再试~");
                }
            });
        });
        initTable();

        function initTable() {
            layui.table.render({
                elem: '#demo'
                , url: '/api/account/sel?keyword=' + layui.jquery("#keyword").val() //数据接口
                , cols: [[ //表头
                    {type: 'checkbox'},
                    {field: 'account_id', title: 'ID', sort: true},
                    {field: 'account_no', title: '学号'},
                    {field: 'account_name', title: '姓名'},
                    {field: 'gender_name', title: '性别'},
                    {field: 'add_time_name', title: '添加时间'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 88}
                ]]
            });
            layui.table.on('tool(demo)', function (obj) {
                if (obj.event === 'edit') {
                    window.open("/pc/index/edit?account_id=" + obj.data.account_id);
                }
                if (obj.event === "del") {
                    //调用jquery框架的ajax组件
                    layui.jquery.ajax({
                        //接口地址
                        url: "/api/account/del?id=" + obj.data.account_id,
                        //提交方式
                        type: "GET",
                        //成功回调
                        success: function (data) {
                            if (data === "1") {
                                //代表后端返回数据正常，数据成功写入数据库了
                                alert("删除成功");
                                obj.del();
                                return;
                            }
                            alert(data);
                        },
                        //失败回调
                        error: function (data) {
                            alert("接口异常，请稍后再试~");
                        }
                    });
                }
            });
        }
    });
</script>
</body>
</html>
